<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 内容显示 -->
        <el-card>
            <!-- 新增用户按钮 -->
            <el-row :gutter="20">
                <el-col :span="2">
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addDialogVisible = true">新增角色
                    </el-button>
                </el-col>
            </el-row>
            <el-row>
                <!-- 表格 -->
                <el-col>
                    <el-table :data="roleList" border style="width: 60%">
                        <el-table-column type="expand">
                            <template slot-scope="scope">
                                <el-row :class="['bottom', i === 0?'top':'','rcenter']" v-for="m,i in scope.row.menu"
                                    :key="m.id">
                                    <el-col :span="6">
                                        <el-tag closable @click="removeMenu(scope.row,m.id)">{{ m.name }}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="14">
                                        <el-tag closable type="success" @click="removeMenu(scope.row,sm.id)"
                                            v-for="sm in m.children" :key="sm.id">
                                            {{ sm.name }}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" />
                        <el-table-column prop="id" label="ID" />
                        <el-table-column prop="name" label="角色名称" />
                        <el-table-column prop="desc" label="角色详情" />
                        <el-table-column prop="level" label="操作" width="300px">
                            <template slot-scope="scope">
                                <el-button size="mini" type="success" icon="el-icon-edit">修改</el-button>
                                <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
                                <el-button size="mini" type="warning" icon="el-icon-setting"
                                    @click="showMenuDialog(scope.row)">分配权限</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog :visible.sync="menuDialogVisible" v-model="menuDialogVisible" title="分配权限" width="30%"
            :before-close="dialogClose">
            <el-tree default-expand-all node-key="id" :default-checked-keys="keyList" show-checkbox :data="menuList"
                :props="menuProps" ref="treeref"></el-tree>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogClose()">取消</el-button>
                    <el-button type="primary" @click="editMenu()">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>


<script >
export default {
    data() {
        return {
            roleList: [],
            menuDialogVisible: false,
            menuProps: {
                "label": 'name',
                children: 'children'
            },
            menuList: [],
            keyList: [],
            rid: 0
        }
    },
    created() {
        this.getRoleList()
        // this.getMenuList()
    },
    methods: {
        async getRoleList() {
            const { data: res } = await this.$axios.get("/api/role/")
            // console.log(res);
            if (res.status !== 200) return this.$msg.error(res.msg)
            this.roleList = res.data
        },
        removeMenu(row, mid) {
            this.$msgb.confirm("此操作将永久删除该权限,是否继续？", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: "取消",
                type: 'warning'
            })
                .then(async () => {
                    const { data: resp } = await this.$axios.get(`api/del_menu/${row.id}/${mid}`)
                    if (resp !== 200) return this.$msg(resp.msg)
                    this.$msg({
                        type: 'success',
                        message: "删除成功！"
                    })
                    // this.getRoleList()
                    row.menu = resp.data
                })
                .catch(() => {
                    this.$msg({
                        type: 'info',
                        message: "已取消删除"
                    })
                })
        },
        showMenuDialog(row) {
            this.rid = row.id
            this.getMenuList()
            this.menuDialogVisible = true
            this.getKeys(row.menu)
            console.log(this.keyList);
        },
        async getMenuList() {
            const { data: resp } = await this.$axios.get("/api/menu")
            if (resp.status !== 200) return this.$msg(resp.msg)
            this.menuList = resp.data
        },
        getKeys(menu) {
            menu.forEach(item => {

                item.children.forEach(i => {
                    this.keyList.push(i.id)
                })
            })
        },
        dialogClose() {
            this.keyList = []
            this.menuDialogVisible = false
        },
        async editMenu() {
            console.log(this.rid);
            const mids = [
                ...this.$refs.treeref.getCheckedKeys(),
                ...this.$refs.treeref.getHalfCheckedKeys()
            ]
            const midsStr = mids.join(",")
            const { data: resp } = await this.$axios.post(`/api/set_menu/${this.rid}`, this.$qs.stringify({ mids: midsStr }))
            if (resp.status !== 200) return this.$msg.error(resp.msg)
            this.$msg.success(resp.msg)
            this.getRoleList()
            this.dialogClose()
        }
    }
}
</script>

<style lang="less" scoped>
.top {
    border-top: 1px solid #eee;
}

.bottom {
    border-bottom: 1px solid #eee;
}

.el-tag {
    margin: 10px;
}

.rcenter {
    display: flex;
    align-items: center;
}
</style>